<template>
    <div>
      <h1>toRaw-markRaw</h1>
      <h3>姓名(原始):{{newPerson.name}}</h3>
      <h3>年龄(响应):{{person.age}}</h3>
      <button @click='change1'>修改姓名</button>
      <button @click='change2'>修改年龄</button>
    </div>
  </template>
  
  <script setup lang="ts" name="Raw">
  import { ref, reactive,toRaw,markRaw} from 'vue'
  // 相关文章：https://blog.csdn.net/qq_48597462/article/details/142489312?ops_request_misc=&request_id=&biz_id=102&utm_term=toRaw&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduweb~default-0-142489312.142^v101^control&spm=1018.2226.3001.4187
  let person = reactive({
    name:"孙悟空",
    age:10
  })
  let newPerson = toRaw(person);
  let obj = markRaw({
    a:"10",
    b: true
  })
  let obj1 = reactive(obj)
  console.log(obj,obj1)
  function change1() {
    newPerson.name = '哪吒'
  }
  function change2() {
    person.age = 500
  }
  
  </script>
  <style lang='scss' scoped>
  
  </style>